<template>
  <div>
    <div class="grid-box">
      <div class="grid-item pointer" @click="showDialog(4)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon1.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">净运营收入</div>
            <div class="grid-small-title">累计到6月</div>
          </div>
          <div class="grid-main">¥{{ data.capitalExpend | MoneyFormat }}</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(5)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon2.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">资本性支出</div>
            <div class="grid-small-title">累计到6月</div>
          </div>
          <div class="grid-main">¥{{ data.netCash | MoneyFormat }}</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(6)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon3.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">净现金流</div>
            <div class="grid-small-title">累计到6月</div>
          </div>
          <div class="grid-main">¥{{ data.netOperatingIncome | MoneyFormat }}</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(7)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon4.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">合约口径收缴率</div>
            <div class="grid-small-title">累计到6月</div>
          </div>
          <div class="grid-main">{{ data.contractCaliberCapture }}</div>
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="grid-item pointer" @click="showDialog(8)">
        <div class="grid-icon">
          <img src="../../../assets/images/groupOperation/icon5.png" />
        </div>
        <div class="grid-main-box">
          <div class="grid-title-box">
            <div class="grid-larege-title">权责口径收缴率</div>
            <div class="grid-small-title">累计到6月</div>
          </div>
          <div class="grid-main">{{ data.rightsCaliberCapture }}</div>
        </div>
      </div>
    </div>
    <operation-popup ref="operationPopup" :operation-type="operationType" :select-time="selectTime" :dialog-type="dialogType"></operation-popup>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import operationPopup from '../../groupOperation/components/operationPopup.vue';
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      selectTime: dayjs().format('YYYY-MM'),
      dialogType: null,
      operationType: null,
    };
  },
  components: {
    operationPopup,
  },
  computed: {
    month() {
      return dayjs(this.selectTime).month() + 1;
    },
  },
  mounted() {},
  methods: {
    showDialog(dialogType) {
      return;
      this.dialogType = dialogType;
      this.operationType = 2;
      this.$nextTick(() => {
        this.$refs.operationPopup.showFurther = true;
        this.$refs.operationPopup.getTreeList();
      });
    },
  },
  filters: {
    MoneyFormat: function (money) {
      if (money && money != null) {
        money = String(money);
        var left = money.split('.')[0],
          right = money.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var temp = left
          .split('')
          .reverse()
          .join('')
          .match(/(\d{1,3})/g);
        return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
      } else if (money === 0) {
        return '0.00';
      } else {
        return '';
      }
    },
  },
};
</script>
<style lang="scss">
.group-operation-title-box {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;

  .group-operation-title {
    flex: 1;
    display: flex;
    align-items: center;
    .large-title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 25px;
    }

    .small-title {
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 25px;
    }

    .legend-box {
      margin-left: 50px;
      display: flex;
      align-items: center;
      .legend-title {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
      }
      .legend-item-box {
        margin-left: 16px;
        display: flex;
        align-items: center;
        .legend-item {
          margin-right: 26px;
          display: flex;
          align-items: center;

          .icon {
            margin-right: 5px;
            width: 12px;
            height: 12px;
            border-radius: 3px;
          }
          .color-82DEB5 {
            background: #82deb5;
          }
          .color-FFA9A9 {
            background: #ffa9a9;
          }
          .color-9CC2FD {
            background: #9cc2fd;
          }
          .color-FFD9A5 {
            background: #ffd9a5;
          }

          .legend-item-title {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }

  .dropdown-box {
    .el-dropdown-link {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 25px;

      i {
        margin-right: 4px;
        font-size: 16px;
        &:last-child {
          margin-right: 0;
        }
      }

      img {
        margin-right: 4px;
        width: 16px;
        height: 16px;
      }
    }
  }
}
.border {
  border-bottom: 1px solid #e5e5e5;
}
.grid-box {
  margin-bottom: 30px;
  height: 100px;
  display: flex;
  align-items: center;

  .grid-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .grid-icon {
      width: 38px;
      height: 38px;
      margin-right: 15px;
    }
    .grid-main-box {
      .grid-title-box {
        display: flex;
        align-items: center;
        .grid-large-title {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }

        .grid-small-title {
          margin-top: 5px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
      }

      .grid-main {
        margin-top: 5px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
      }
    }
  }

  .el-divider {
    height: 40px;
  }
}
</style>